<template>
  <div>
    <span class="processStatus">
      <el-button size="small" :class="process.type" type="text" class="processbtn" @click="openProcessInfoForm(process)">{{ $t(process.label) }}</el-button>
    </span>
    <el-dialog :visible.sync="infoOpen" :title="$t('流程详情')" :destroy-on-close="true" custom-class="dialogForm" style=" text-align: left;" append-to-body :close-on-click-modal="false" :lock-scroll="false">
      <ProcessInfoForm ref="processInfoForm" />
    </el-dialog>
  </div>
</template>

<script>
  import ProcessInfoForm from '@/views/act/process/processInfoForm'

  export default {
    name: 'ProcessStatus',
    components: {
      ProcessInfoForm
    },
    props: {
      status: {
        type: String,
        required: false,
        default: null
      },
      actId: {
        type: String,
        default: undefined
      },
      // 是否需要展示审批记录
      showRecord: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        // 遮罩层
        infoOpen: false,
        // 流程状态
        processStatus: {
          N: {
            type: 'info',
            disable: true,
            label: this.$t('未启动')
          },
          Z: {
            type: 'danger',
            label: this.$t('审批终止')
          },
          W: {
            type: 'success',
            label: this.$t('审批完成')
          },
          D: {
            type: 'warning',
            label: this.$t('待审批')
          },
          H: {
            type: 'exempt',
            label: this.$t('豁免')
          },
          P: {
            type: 'pass',
            label: this.$t('上会通过')
          },
          V: {
            type: 'nopass',
            label: this.$t('上会未通过')
          }
        }
      }
    },
    computed: {
      process() {
        return this.$props.status ? this.processStatus[this.$props.status] : this.processStatus['N']
      }
    },
    methods: {
      // 打开流程详情页面
      openProcessInfoForm(process) {
        if (process.disable) {
          return
        }
        if (this.showRecord === true) {
          if (this.actId) {
            this.infoOpen = true
            this.$nextTick(() => {
              var proData = {}
              proData.actId = this.actId
              this.$refs.processInfoForm.init(proData)
            })
          } else {
            this.$message.error(this.$t('流程ID为空,不能查看流程信息'))
          }
        }
      }
    }
  }
</script>
